<template>
  <div class="content">
    <div class="detail">
      <dt-header :title='title' :line-number="3" ref='header'>
        <div>
          <div v-if="name == 'yearendEdit'" class="btn">
            <Button type="primary" @click="onImport">导入数据</Button>
            <Button type="primary" @click="onExport">导出Excel</Button>
            <Button type="primary" @click="onSubmit">提交</Button>
          </div>
          <div v-else-if="name == 'yearendDetail' || name == 'yearendApprovalDetail'" class="btn">
            <Button v-if="!auditId" type="primary" @click="onFlow">流程信息</Button>
            <Button type="primary" @click="onExport">导出Excel</Button>
            <Button v-if="auditId" type="primary" @click='onAudit'>审核</Button>
          </div>
        </div>
      </dt-header>
    </div>
    
    <dt-grid ref="table" page :onFetch='onFetch' />
    
    <detail-modal ref='detail' @success="update" />
    <import-modal ref='import' @success="update" />
    <audit-modal ref='audit' />
    <process-modal ref='process' />
	</div>
</template>

<script>
  import YearendOpt from './opt/YearendOpt.js'
  import YearendColumn from './opt/YearendColumn.js'
  
  import detailModal from './components/detail-modal.vue'
  import importModal from './components/import-modal.vue'
  import auditModal from '@/components/biz/audit/audit-modal.vue'
  import processModal from '@/components/biz/audit/process-modal.vue'
  
  import yearMgr from '@/biz/bonus/yearend'
  
  export default {
    components: {
      detailModal,
      importModal,
      auditModal,
      processModal
    },
    data() {
      return {
        id: null,
        name: null,
        auditId: null,
        title: '',
        info: {},
      }
    },
    mounted() {
      this.name = this.$route.name
      this.id = this.$route.query.id
      this.auditId = this.$route.query.auditId
      this.$nextTick(() => {
        this.$refs.table.init(this, new YearendColumn())
        this.update()
      })
    },
    methods: {
      update() {
        this.detail()
        this.$refs.table.fetch(true)
      },
      detail () {
        yearMgr.detail(this.id).then(res => {
          this.info = res
          this.title = `${res.bonusName}（${res.orgName} ${res.bonusYear}年 ${res.bonusMonth}月）`
          this.$refs.header.init(new YearendOpt(), this.info)
        })
      },
      onFetch(data) {
        data.bonusId = this.id
        return yearMgr.detailList(data)
      },
      onSubmit() {
        this.$Modal.confirm({
          title: '是否确认提交该年底奖金单？',
          onOk: () => {
            yearMgr.submit(this.id).then(res => {
              this.$Message.success('提交成功')
              this.$store.commit('deleteroutefun', this.$route.meta.title)
              this.$router.go(-1)
            })
          },
        })
      },
      onImport() {
        this.$refs.import.show({
          bonusId: this.id,
          bonusName: this.info.bonusName
        })
      },
      onExport() {
        yearMgr.exportDetail(this.id)
      },
      onAudit() {
        this.$refs.audit.show({
          auditId: this.auditId,
          auditType: 12,
          businessId: this.id
        })
      },
      onFlow() {
        this.$refs.process.show({
          auditType: 12,
          businessId: this.id
        })
      },
      onDetail(item) {
        this.$refs.detail.show(item)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
  
  .detail {
    padding: 10px 10px 1px;
    background-color: #F8F8FF;
    border-radius: 2px;
  }
  
  .btn {
    Button {
      margin-left: 10px;
    }
  }
</style>
